import { useEffect, useState } from "react";
import style from "./index.module.scss";

import desc from "@/assets/images/annual-festival/desc.png";

import Top1 from "@/assets/images/annual-festival/top1.png";
import Top2 from "@/assets/images/annual-festival/top2.png";
import Top3 from "@/assets/images/annual-festival/top3.png";

import LogoBg1 from "@/assets/images/annual-festival/logo-bg1.png";
import LogoBg2 from "@/assets/images/annual-festival/logo-bg2.png";
import LogoBg3 from "@/assets/images/annual-festival/logo-bg3.png";
import LogoBg4 from "@/assets/images/annual-festival/logo-bg4.png";
import RankTitle from "@/assets/images/annual-festival/rank-title.png";

import { showToast } from "../util";
import classNames from "classnames";
import { BaseUrl } from "@/utils/index";
// import { mockData } from './data.ts';
const Content = () => {
  const urlParams = new URLSearchParams(window.location.search);
  const authorizationToken = urlParams.get("userId");
  console.log("authorizationToken", authorizationToken);

  const [data, setData] = useState([]);
  const getData = async () => {
    let url = `/gift/anniversary/rank`;
    fetch(BaseUrl + url, {
      method: "GET",
      headers: {
        Authorization: authorizationToken,
      },
    })
      .then((response) => response.json())
      .then((response) => {
        if (response.code === 200 && response.data) {
          setData(response.data || []);
        } else {
          setData([]);
          console.error(response.msg);
          showToast(response.msg);
        }
      })
      .catch((error) => console.error("请求失败", error));
  };

  useEffect(() => {
    if (authorizationToken) {
      getData();
    } else {
      console.error("Authorization token not found in URL");
    }
  }, []);

  return (
    <div className={style.content_wrap}>
      <div className={style.descBox}>
        <img src={desc} alt="图" />
      </div>
      <div className={style.rank_container}>
        <div className={style.titleBox}></div>
        <div className={style.data_box}>
          {data.map((dataItem, i) => (
            <div className={style.card} key={dataItem?.guildId}>
              {i === 0 && (
                <div className={style.rankIndex}>
                  <img src={Top1} alt=""></img>
                </div>
              )}
              {i === 1 && (
                <div className={style.rankIndex}>
                  <img src={Top2} alt=""></img>
                </div>
              )}
              {i === 2 && (
                <div className={style.rankIndex}>
                  <img src={Top3} alt=""></img>
                </div>
              )}
              {i > 2 && <div className={style.rankIndex}>TOP{i + 1}</div>}
              <div
                className={classNames(style.guildLogo, {
                  [style.guildLogo1]: i === 0,
                  [style.guildLogo2]: i === 1,
                  [style.guildLogo3]: i === 2,
                  [style.guildLogo4]: i > 2,
                })}
              >
                {i === 0 && (
                  <img
                    className={classNames(style.logoBg, style.logoBg1)}
                    src={LogoBg1}
                    alt=""
                  ></img>
                )}
                {i === 1 && (
                  <img
                    className={classNames(style.logoBg, style.logoBg2)}
                    src={LogoBg2}
                    alt=""
                  ></img>
                )}
                {i === 2 && (
                  <img
                    className={classNames(style.logoBg, style.logoBg3)}
                    src={LogoBg3}
                    alt=""
                  ></img>
                )}
                {i > 2 && (
                  <img
                    className={classNames(style.logoBg, style.logoBg4)}
                    src={LogoBg4}
                    alt=""
                  ></img>
                )}
                <img
                  className={classNames(style.logo, {
                    [style.logo1]: i === 0,
                    [style.logo2]: i === 1,
                    [style.logo3]: i === 2,
                    [style.logo4]: i > 2,
                  })}
                  src={dataItem?.guildLogo}
                  alt=""
                ></img>
              </div>
              <div className={style.guildName}>{dataItem?.guildName}</div>
              <div className={style.guildDesc}>{dataItem?.showValue}</div>
              <img className={style.descImg} src={RankTitle} alt="" />
              <div className={style.rankWrap}>
                {(dataItem?.roomRank || []).map((item) => (
                  <div className={style.rankItem} key={item?.roomId}>
                    <div className={style.useBox}>
                      <img
                        src={item?.roomImg}
                        alt=""
                        // onClick={() => goUserPage(item.userId)}
                      />
                      <div className={style.title}>{item.title}</div>
                    </div>

                    <div className={style.score}>
                      <span>荣耀值</span>
                      <span>{item?.showValue}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div className={style.bgRankBottom}> </div>
      </div>
    </div>
  );
};

export default Content;
